<template>
 <div id="app">
 <header>
 <h1>2024待办事项</h1>
<form id="new-task-form" @submit.prevent="handleAdd">
       <input
         type="text"
         v-model="task"
         id="new-task-input"
         placeholder="把计划写下来吧?"
       />
       <input
         type="submit"
         id="new-task-submit"
         value="添加任务"
       />
     </form>
   </header>
   <main>
     <section class="task-list">
       <h2>任务列表</h2>
       <div id="tasks">
         <template v-for="(item, index) in tasks" :key="index">
           <div class="task">
             <div class="content">
               <input
                 type="text"
                 class="text"
                 v-model="tasks[index]"
                 :readonly="readonly[index]"
                 :disabled="readonly[index]"
               />
             </div>
             <div class="actions">
               <button class="edit" @click="handleEdit($event, item, index)">
                 {{ btnName[index] }}
               </button>
               <button class="delete" @click="handleDelete(index)">
                 Delete
               </button>
             </div>
           </div>
         </template>
       </div>
     </section>
   </main>
 </div>
</template>

<script>
export default {
 data() {
   return {
     tasks: [],
     task: "",
     btnName: [],
     readonly: [],
   };
 },
 methods: {
   handleAdd() {
     if (this.task) {
       this.tasks.push(this.task);
       this.task = "";
       this.btnName.push("编辑");

       this.readonly.push(true);
     }
   },
   handleDelete(index) {
     this.tasks.splice(index, 1);
     this.btnName.splice(index, 1);
     this.readonly.splice(index, 1);
   },
   handleEdit($event, item, index) {
     if (this.btnName[index] === "编辑") {
       this.btnName[index] = "保存";
       this.readonly[index] = !this.readonly[index];
     } else {
       this.tasks[index] = item;
       this.btnName[index] = "编辑";
       this.readonly[index] = !this.readonly[index];
     }
   }
 }
}
</script>

<style scoped>
/* 添加所需样式 */

.task-list {
 margin-top: 20px;
}

.task {
 display: flex;
 justify-content: space-between;
 margin-bottom: 10px;
}

.actions {
 display: flex;
 gap: 5px;
}
</style>

